
import {
    DownOutlined
} from '@ant-design/icons';
import { Layout, Col, Row, Menu, MenuProps, Space, Dropdown } from 'antd';
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import HeaderBreadcrumb from "../../component/HeaderBreadcrumb";
const { Header } = Layout;
const App: React.FC = () => {

    const navigate = useNavigate()

    // 用户名
    const user_name = localStorage.getItem(' user_name')

    // 点击 MenuItem 调用此函数，跳转至相应路由
    const changePath: MenuProps['onClick'] = ({ key, keyPath, domEvent }) => {
        // console.log(key, keyPath, domEvent);
        switch (key) {
            case '/logout':
                localStorage.clear()
                navigate('/login', { replace: true })
                break;
            default:
                break;
        }

    }
    // 点击管理员账号名弹出的菜单的设置
    const menuitem = (
        <Menu
            onClick={changePath}
            items={[
                {
                    type: 'divider',
                },
                {
                    label: '退出',
                    key: '/logout',
                },
            ]}
        />
    )

    return (
        <Header className="site-layout-background" style={{ padding: 0 }}>
            <Row align="middle" wrap={false}>
                <Col offset={1} span={18}>
                    <HeaderBreadcrumb />
                </Col>
                <Col>
                    <Space>
                        您好：
                        <Dropdown overlay={menuitem} trigger={['click']}>
                            <a onClick={e => e.preventDefault()}>
                                <Space>
                                    {user_name ? user_name : ''}
                                    <DownOutlined />
                                </Space>
                            </a>
                        </Dropdown>
                    </Space>
                </Col>
            </Row>
        </Header>
    )
}
export default App;